<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<!-- IE 浏览器运行最新的渲染模式-->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!-- 启用响应式特性 -->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 双核使用webkit内核 -->
		<meta name="renderer" content="webkit">
		<title>订单列表</title>
		<link href="../css/bootstrap.min.css" rel="stylesheet">
		<link href="../css/common.css" rel="stylesheet">
		<link href="../css/corptravel.css" rel="stylesheet">
		<link href="../css/enterprise.css" rel="stylesheet">
		<!-- IconFont图标 -->
		<link href="../css/iconfont.css" rel="stylesheet">
		<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
		<script type="text/javascript" src="../js/bootstrap.min.js"></script>
		<script type="text/javascript" src="../js/My97DatePicker/WdatePicker.js"></script>
		<!-- 兼容IE8 -->
		<!--[if lte IE 9]>
<script type="text/javascript" src="../../js/html5shiv.min.js"></script>
<script type="text/javascript" src="../../js/respond.min.js"></script>
<![endif]-->
		<!-- layer弹框 2.1 -->
		<script type="text/javascript" src="../js/layer/layer.js"></script>

		<style>
			.tabs { width:35px; padding:3px; ; background-color:#db514f; color:#fff; text-align:center; margin-top:2px; margin-bottom:2px; border-radius:3px; }
.startbox { overflow:hidden; margin-bottom:5px; }
.start { float:left; background-color:#f9a60a; padding:2px; color:#fff; border-radius:2px; margin-right:5px; }
.destination { float:left; background-color:#0096de; padding:2px; color:#fff; border-radius:2px; margin-right:5px; }
.startcity,.endcity { float:left; font-size:12px; color:#666; }
.startcity span ,.endcity span{ font-size:14px; color:#000; font-weight:bold; }
.destination1 {float:left; background-color:#0096de; padding:2px; color:#fff; border-radius:2px; margin-right:5px; }
.destination2 {float:left; background-color:#0096de; padding:2px; color:#fff; border-radius:2px; margin-right:5px; }
</style>
	</head>
	<body class="bg-body">
		<!-- header -->
		<nav class="navbar navbar-default navbar-fixed-top bg-white">
			<!-- 小导航 -->
			<nav class="navbar navbar-default" style=" min-height:30px; line-height:30px; margin-bottom:0px; border-radius:0;">
				<div class="container font12">
					<!-- Brand and toggle get grouped for better mobile display -->
					<div class="navbar-header">
						<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
						 aria-expanded="false">
							<span class="sr-only">Toggle navigation</span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button>
						<!-- <span style=" margin-left:-15px; margin-right:20px;">企业商旅管理</span>-->
					</div>
					<ul class="nav navbar-nav nav-top-small userinfo" style="margin-left:-15px;">
						<li class="dropdown"><a href="../user/login.html" class="dropdown-toggle">
								请登录</a>
						</li>
					</ul>
					<ul class="nav navbar-nav navbar-right nav-top-small">
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
								<i class="icon iconfont font14 " style=" vertical-align:middle;">&#xe62b;</i> 028-12345678 <span class="caret"></span></a>
							<ul class="dropdown-menu">
								<li><a href="#">（或）028-12345678</a></li>
								<li><a href="#">（或）028-12345678</a></li>
								<!--<li role="separator" class="divider"></li>-->
							</ul>
						</li>

					</ul>
					<ul class="nav navbar-nav navbar-right nav-top-small">
						<li><a href="../帮助中心/help.html">帮助中心</a></li>

					</ul>
				</div>
			</nav>
			<!-- 小导航结束 -->

			<div class="container">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
					 aria-expanded="false">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a class=" " href="差旅报告/汇总.html"><img src="../img/logo.png" width="210" height="70" alt="系统LOGO" class="pull-left mar-right-30"
						 style="margin-left:-15px;"></a>
					<!--<h4 class="navbar-brand font24" >成都万里行科技发展有限公司</h4>-->
				</div>

				<!-- Collect the nav links, forms, and other content for toggling -->
				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav navbar-right">
						<li><a href="../index.html"><i class="icon iconfont icon-nav-block font24">&#xe620;</i> 在线预订</a></li>
						<li class="active"><a href="../order/orderList.html"><i class="icon iconfont icon-nav-block font24">&#xe61c;</i>
								订单管理</a></li>

					</ul>
				</div><!-- /.navbar-collapse -->

			</div>
		</nav>
		<!-- header end -->
		<!-- 管理模板 -->
		<div class="container bg-gray-eee box-shadow mar-bottom-30" style="padding-right:0px; padding-left:0px; position:relative; margin-top:120px;">

			<!-- main -->
			<div class="rightCon" style="">
				<!-- 引导 -->
				<ol class="breadcrumb">
					<li>首页</li>
					<li>订单管理</li>
					<li class="active">订单列表</li>
				</ol>
				<!-- 引导结束 -->
				<div class="row">
					<div class="col-sm-4">
						<div class="form-group">
							<label for="apdiv" class="w90 text-right">预定时间</label>
							<input type="text" class="form-control input-sm" style=" width:90px; display:inline-block;" id="" placeholder="日期">
							&nbsp;至&nbsp;
							<input type="text" class="form-control input-sm" style=" width:90px; display:inline-block;" id="" placeholder="日期">
						</div>
					</div>
					<div class="col-sm-4">
						<div class="form-group">
							<label for="apdiv" class="w90 text-right">票号</label>
							<input type="text" class="form-control input-sm" style=" width:200px; display:inline-block;" id="" placeholder="number">
						</div>
					</div>
					<div class="col-sm-4">
						<div class="form-group">
							<label for="apdiv" class="w90 text-right">航班号</label>
							<input type="text" class="form-control input-sm" style=" width:200px; display:inline-block;" id="" placeholder="number">
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-4">
						<div class="form-group">
							<label for="apdiv2" class="w90 text-right">起飞日期</label>
							<input type="text" class="form-control input-sm" style=" width:90px; display:inline-block;" id="input"
							 placeholder="日期">
							&nbsp;至&nbsp;
							<input type="text" class="form-control input-sm" style=" width:90px; display:inline-block;" id="input"
							 placeholder="日期">
						</div>
					</div>
					<div class="col-sm-4">
						<div class="form-group">
							<label for="apdiv" class="w90 text-right">订单编号</label>
							<input type="text" class="form-control input-sm" style=" width:200px; display:inline-block;" id="" placeholder="number">
						</div>
					</div>
					<div class="col-sm-4">
						<div class="form-group">
							<label for="apdiv" class="w90 text-right">订单状态</label>
							<select name="select" class="form-control input-sm" style=" width:200px; display:inline-block;">
								<option value="1-1">全部</option>
								<option value="1-1">新订单</option>
								<option value="1-2">已经支付等待出票</option>
								<option value="1-3">已经出票交易结束</option>
								<option value="1-4">未出票已退款</option>
								<option value="1-5">已取消</option>
							</select>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-4">
						<div class="form-group">
							<label for="apdiv" class="w90 text-right">起降城市</label>
							<input type="text" class="form-control input-sm" style=" width:90px; display:inline-block;" id="" placeholder="城市">
							&nbsp;至&nbsp;
							<input type="text" class="form-control input-sm" style=" width:90px; display:inline-block;" id="" placeholder="城市">
						</div>
					</div>
					<div class="col-sm-4">
						<div class="form-group">
							<label for="apdiv" class="w90 text-right">乘机人</label>
							<input type="text" class="form-control input-sm" style=" width:200px; display:inline-block;" id="" placeholder="姓名">
						</div>
					</div>

				</div>
				<!--<div class="form-group">
          <label class="sr-only" for="apdiv">联系人</label>
          <input type="text" class="form-control" style=" width:100px;" id="" placeholder="联系人姓名">
        </div>
        <div class="form-group">
          <label class="sr-only" for="apdiv">联系电话</label>
          <input type="text" class="form-control" style=" width:120px;" id="" placeholder="联系电话">
        </div>-->
				<div class="text-center mar-top-10 bor-top-solid-1 pad-top-10 mar-bottom-10">
					<button type="submit" class="btn btn-danger btn-sm mar-right-20">查询</button>
					<button type="submit" class="btn btn-default btn-sm mar-right-20">清空条件</button>
				</div>
				<table id="ticketinfo" border="0" cellspacing="0" cellpadding="0" class="table table-hover table-striped font12 table-bordered v-align-top">
					<tr>
						<th>订单号</th>
						<th>乘机人</th>
						<th>航班号</th>
						<th>舱位</th>
						<th>起飞行程</th>
						<th>到达行程</th>
						<th>结算总价</th>
						<th style="width:65px;">订单状态</th>
						<th>操作</th>
					</tr>

					<!-- 订单信息 -->
				</table>
				<nav class="pull-right ">
					<ul class="pagination pagination-sm" style=" margin-top:0px;">
						<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
						<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
						<li><a href="#">2</a></li>
						<li><a href="#">...</a></li>
						<li><a href="#">5</a></li>
						<li> <a href="#" aria-label="Next"> <span aria-hidden="true">&raquo;</span> </a> </li>
					</ul>
					<div class="clearfix"></div>
				</nav>
				<div class="clearfix"></div>
			</div>
		</div>
		<!-- main end -->
		</div>
		<!-- 管理模板 结束 -->



		<!-- 退票弹框 -->
		<div id="rev" style="display:none">
			<div class="modal-body">
				<div class="pad-10">
					<h4>行程信息</h4>
					<table width="100%" border="0" cellspacing="0" cellpadding="0" class="table table-bordered mar-bottom-10">
						<tr class=" bg-gray-f5">
							<th><input name="" type="checkbox" value=""></th>
							<th>航班号</th>
							<th>起飞时间</th>
							<th>到达时间</th>
							<th>行程</th>
						</tr>
						<tr id="revFlight">
							<td><input name="" type="checkbox" value=""></td>
							<td>CA8954</td>
							<td>2014-10-18 7:50:00</td>
							<td>2014-10-18 12:25:00</td>
							<td>成都双流 - 上海浦东</td>
						</tr>
					</table>

					<table width="100%" border="0" cellspacing="0" cellpadding="0" class="table table-bordered mar-bottom-10">
						<tr class=" bg-gray-f5">
							<th><input name="" type="checkbox" value=""></th>
							<th>姓名</th>
							<th>乘客类型</th>
							<th>证件类型</th>
							<th>证件号码</th>
							<th>机建/燃油</th>
							<th>企业结算价</th>
						</tr>
						<tr>
							<td><input name="" type="checkbox" value=""></td>
							<td>荣思佳</td>
							<td>成人</td>
							<td>身份证</td>
							<td>510301198808081018</td>
							<td>￥100/￥280</td>
							<td>￥1440</td>
						</tr>
						<tr>
							<td><input name="" type="checkbox" value=""></td>
							<td>李冬阳</td>
							<td>成人</td>
							<td>身份证</td>
							<td>510301198808081018</td>
							<td>￥100/￥280</td>
							<td>￥1440</td>
						</tr>
					</table>
					<form class="form-horizontal">
						<div class="form-group">
							<label for="inputEmail3" class="col-sm-3 control-label">退票原因</label>
							<div class="col-sm-6">
								<input type="text" class="form-control" id="inputEmail3" placeholder="请输入退票理由">
								<input type="hidden" name="orderNumber">
								<input type="hidden" name="price">
							</div>
						</div>
					</form>

				</div>
			</div>
			<div class="modal-footer mar-top-5">
				<button type="button" class="btn btn-primary" onClick="refundTicket()">申请退票</button>
				</a>
				<button type="button" class="btn btn-default" onClick="layer.closeAll()">关闭</button>
			</div>
		</div>

		<!-- 申请改签弹框 -->
		<div id="gaiqian" style="display:none">
			<div class="modal-body">
				<form class="form-horizontal">
					<!-- <div class="form-group">
						<label for="" class="col-sm-4 control-label">改签乘机人：</label>
						<div class="col-sm-6">
							<label class="checkbox-inline" style=" margin-left:10px;">
								<input type="checkbox" id="inlineCheckbox1" value="option1"> 孙靖
							</label>
							<label class="checkbox-inline">
								<input type="checkbox" id="inlineCheckbox1" value="option1"> 尚丁明
							</label>
							<label class="checkbox-inline">
								<input type="checkbox" id="inlineCheckbox1" value="option1"> 胡家富
							</label>
							<label class="checkbox-inline">
								<input type="checkbox" id="inlineCheckbox1" value="option1"> 刘述军
							</label>
							<label class="checkbox-inline">
								<input type="checkbox" id="inlineCheckbox1" value="option1"> 王博玉
							</label>
						</div>
					</div> -->

					<div class="form-group">
						<label for="" class="col-sm-4 control-label">期望日期：</label>
						<div class="col-sm-6">
							<input type="text" name="dayTime" class="form-control" id="" placeholder="请选择日期" onClick="WdatePicker()">
						</div>
					</div>

					<div class="form-group">
						<label for="" class="col-sm-4 control-label">期望时间：</label>
						<div class="col-sm-6">
							<select name="startTime" class="form-control ">
								<option value="不限">不限</option>
								<option value="上午">上午</option>
								<option value="中午">中午</option>
								<option value="下午">下午</option>
								<option value="晚上">晚上</option>
								<option value="凌晨">凌晨</option>
							</select>

						</div>
					</div>
					<div class="form-group">
						<label for="" class="col-sm-4 control-label">期望航司：</label>
						<div class="col-sm-6">
							<select name="airline" class="form-control ">
								<option value="不限">不限</option>
								<option value="中国航空">中国航空</option>
								<option value="南方航空">南方航空</option>
								<option value="四川航空">四川航空</option>
							</select>
						</div>
					</div>
					<div class="form-group">
						<label for="" class="col-sm-4 control-label">期望仓位：</label>
						<div class="col-sm-6">
							<select name="shippingSpace" class="form-control ">
								<option value="不限">不限</option>
								<option value="经济舱">经济舱</option>
								<option value="公务舱">公务舱</option>
								<option value="商务舱">商务舱</option>
							</select>
						</div>
					</div>

					<div class="form-group">
						<label for="" class="col-sm-4 control-label">备注说明：</label>
						<div class="col-sm-6">
							<input type="text" class="form-control" id="" placeholder="限255字">
						</div>
					</div>
					<input name="ticketId" type="hidden"/>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-primary" onClick="submittip()">确 定</button>
				<button type="button" class="btn btn-default" onClick="layer.closeAll()">关 闭</button>
			</div>
		</div>

		<script>
			$(document).ready(function() {

				$("#ticketinfo").on("click", ".quxiao", function() {
					var obj = $(this);
					layer.confirm('您确定要取消该订单？', {
						title: '取消订单',
						btn: ['确定', '取消'] //按钮
					}, function() {
						$.ajax({
							url: "../../api/deleteOrder.action/" + obj.attr("name"),
							type: "delete",
							data: {},
							success: function(data) {
								obj.parent().parent().remove();
								layer.msg('该订单已取消', {
									icon: 1
								});
							}
						});
					});
				});

				$("#ticketinfo").on("click", ".tuipiao", function() {
					var obj = $(this).parent().parent();
					$("#rev #revFlight td").eq(1).text(obj.children("td").eq(2).text());
					$("#rev #revFlight td").eq(2).text(obj.find(".startcity p").text());
					$("#rev #revFlight td").eq(3).text(obj.find(".endcity p").text());
					$("#rev #revFlight td").eq(4).text(obj.find(".startcity span").text() + " - " +
						obj.find(".endcity span").text());
					$("#rev .form-horizontal input[name='orderNumber']").val(obj.find("td:first-child span").text());
					$("#rev .form-horizontal input[name='price']").val(obj.children("td").eq(6).text());

					layer.open({
						type: 1,
						title: '申请退票',
						area: ['auto', 'auto'],
						fix: false, //不固定
						maxmin: false,
						content: $('#rev'),
					});
				});

				$("#ticketinfo").on("click", ".qiye09", function() {
					var ticketId = $(this).attr("name");
					$("#gaiqian .form-horizontal input[name='ticketId']").val(ticketId);
					layer.open({
						type: 1,
						shift: 2, //出场动画
						area: ['500px', 'auto'],
						title: '申请改签',
						shadeClose: true, //开启遮罩关闭
						content: $('#gaiqian'),
					});
				});

			});
		</script>

		<script>
			function dateFormat(fmt, dateString) {
				var date = new Date(dateString);
				let ret;
				const opt = {
					"Y+": date.getFullYear().toString(), // 年
					"m+": (date.getMonth() + 1).toString(), // 月
					"d+": date.getDate().toString(), // 日
					"H+": date.getHours().toString(), // 时
					"M+": date.getMinutes().toString(), // 分
					"S+": date.getSeconds().toString() // 秒
					// 有其他格式化字符需求可以继续添加，必须转化成字符串
				};
				for (let k in opt) {
					ret = new RegExp("(" + k + ")").exec(fmt);
					if (ret) {
						fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
					};
				};
				return fmt;
			}

			$(function() {
				$.ajax({
					url: "../../api/orderList.action",
					type: "get",
					dataType: "json",
					data: {},
					success: function(data) {
						$.each(data.flightInfo, function(i, e) {
							var html = "";
							html += '<tr><td><span style="font-weight:bold;font-size:15px;">' + e.orderNumber + '</span><br>' +
								dateFormat("YYYY-mm-dd HH:MM:SS", e.orderTime) + '</td><td>';
							$.each(e.flightPeoples, function(j, f) {
								html += '<p>' + f.realName + '</p>';
							});
							html += '</td><td>' + e.flightNumber + '</td>' +
								'<td>' + e.shippingSpace + '</td><td><div class="startbox">' +
								'<div class="startcity"><span>' + e.departure + '</span> 凤凰国际机场<br/><p>' +
								dateFormat("YYYY-mm-dd HH:MM:SS", e.startTime) + '</p></div></div></td><td><div class="startbox">' +
								'<div class="endcity"><span>' + e.destination + '</span> 太平国际机场<br/><p>' +
								dateFormat("YYYY-mm-dd HH:MM:SS", e.endTime) + '</p></div></div></td><td>' + e.price + '</td><td>' + e.orderStatus +
								'</td>';
							if (e.orderStatus == "未支付") {
								html += '<td><a href="#" class="quxiao" name="' + e.id + '">【取消订单】</a><br>' +
									'<a href="javascript:;" onclick="pay(\'' + e.id + '\',this)" >【立即支付】</a></td></tr>'
							} else if (e.orderStatus == "已支付") {
								html += '<td><a href="orderdetails.html?ticketId=' + e.id + '">【查看详情】</a><br>' +
									'<a href="#" class="qiye09" name="' + e.id + '">【申请改签】</a><br>' +
									'<a href="#" class="tuipiao" name="' + e.id + '">【申请退票】</a></td></tr>';
							} else {
								html += '<td><a href="orderdetails.html?ticketId=' + e.id + '">【查看详情】</a></td></tr>';
							}
							$("#ticketinfo tbody").append(html);
						});

					},
					error: function(error) {
						console.log(error);
						if (error.status == 403) {
							window.location.href = "../user/login.html";
						}
					},
				});
			});

			function pay(ticketId, obj) {
				var html = "";

				$.ajax({
					type: "get",
					dataType: "text",
					url: "../../api/zifubaoPay.action/" + ticketId,
					data: {},
					success: function(data) {
						html = "<html><head></heda><body>";
						html += data;
						html += "</body></html>";
						document.write(html);
					},
					error: function(data) {
						if (data.status == 403)
							window.location.href = "../index.html";
					}
				});
			}

			function refundTicket() {
				var orderNumber = $("#rev .form-horizontal input[name='orderNumber']").val();

				$.ajax({
					url: "../../api/ticketRefund.action/out_trade_no/" + orderNumber,
					type: "put",
					data: {},
					success: function(data) {
							$("#ticketinfo tbody tr").each(function(i, e) {
								if ($(e).find("td:first-child span").text() == orderNumber) {
									$(e).children("td").eq(7).text("退款审核中");
									var id = $(e).find("td:last-child a").eq(2).attr("name");
									$(e).find("td:last-child").html('<a href="orderdetails.html?ticketId=' + id + '">【查看详情】</a>')
								}
							});
							setTimeout(function() {
								layer.msg('申请成功', {
									icon: 1
								});
							}, 100); 
					},
					error: function(error) {
						console.log(error);
						setTimeout(function() {
							layer.msg('申请失败', {
								icon: 1
							});
						}, 100);
					}
				});
				layer.closeAll();
			}
			
			function submittip(){
				var id = $("#gaiqian .form-horizontal input[name='ticketId']").val();
				$.ajax({
					url: "../../api/ticketReboot.action",
					type: "post",
					data: $("#gaiqian form").serialize(),
					success: function(data) {
							$("#ticketinfo tbody tr .qiye09").each(function(i, e) {
								if ($(e).attr("name") == id) {
									$(e).parent().prev().text("改签审核中");
									$(e).parent().html('<a href="orderdetails.html?ticketId=' + id + '">【查看详情】</a>')
								}
							});
							setTimeout(function() {
								layer.msg('申请成功', {
									icon: 1
								});
							}, 100); 
					},
					error: function(error) {
						console.log(error);
						setTimeout(function() {
							layer.msg('申请失败', {
								icon: 1
							});
						}, 100);
					}
				});
				layer.closeAll();
			}

      /* 用户退出 */
      function logout(){
      	$.ajax({
      		url: "../../api/logout.action",
      		type: "get",
      		data: {},
      		success: function(data) {
      			window.location.href="../index.html";
      		}
      	});
      }
			
			/* 用户信息 */
			$.ajax({
				url: "../../api/getUserName.action",
				type: "get",
				success: function(data) {
						$(".userinfo").html("");
						$(".userinfo").append(
							'<li class="dropdown"><a href="javascript:;" class="dropdown-toggle"' +
							'data-toggle="dropdown" role="button" aria-haspopup="true" ' +
							'aria-expanded="false">您好，' + data + '<span class="caret"></span></a>' +
							'<ul class="dropdown-menu">' +
							'<li><a href="系统管理/修改密码.html">修改密码</a></li>\n' +
							'<li><a href="javascript:;" onclick="logout()">退出</a></li>' +
							'</ul></li>');
				},
				error: function(error) {
					console.log(error);
					if (error.status == 403) {
						window.location.href = "../user/login.html";
					}
				}
			});
		</script>

	</body>
</html>
